<template>
  <div id="main"  style="width:1000px;height:800px;" ></div>
</template>

<script>
  import * as echarts from 'echarts';
    export default {
        name: "Expqua1",
      props:{
        chartData:{
          type:Array,
          default:() =>[]
        }
      },mounted() {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        setTimeout(function () {

          option = {
            title: {
              text: '2016年-2020年每个季度快递数量'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#497a65'
                }
              }
            },
            legend: {

              data: ['2016年', '2017年', '2018年', '2019年', '2020年']
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                data: ['第一季度','第二季度','第三季度','第四季度']
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '2016（亿件）',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
                data: [65.5,72.6,78.2,86.4]
              },
              {
                name: '2017（亿件）',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
                data: [96.3,99.6,100.6,107.9]
              },
              {
                name: '2018（亿件）',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
                data: [100.2,106.4,126.3,156.1]
              },
              {
                name: '2019（亿件）',
                type: 'line',
                stack: '总量',
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
                data: [120.3,163.2,186.4,200.1 ]
              },
              {
                name: '2020年（亿件）',
                type: 'line',
                stack: '总量',
                label: {
                  show: true,
                  position: 'top'
                },
                areaStyle: {},
                emphasis: {
                  focus: 'series'
                },
                data: [125.3, 213.2, 222.7, 272.1]
              }
            ]
          };

         /* option = {
            legend: {},
            tooltip: {
              trigger: 'axis',
              showContent: false
            },
            dataset: {
              source: [
                ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                ['90后', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                ['80后', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                ['70后', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                ['00后', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
              ]
            },
            xAxis: {type: 'category'},
            yAxis: {gridIndex: 0},
            grid: {top: '55%'},
            series: [
              {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
              {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
              {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
              {type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: {focus: 'series'}},
              {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                emphasis: {focus: 'data'},
                label: {
                  formatter: '{b}: {@2012} ({d}%)'
                },
                encode: {
                  itemName: 'product',
                  value: '2012',
                  tooltip: '2012'
                }
              }
            ]
          }*/
          myChart.on('updateAxisPointer', function (event) {
            var xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
              var dimension = xAxisInfo.value + 1;
              myChart.setOption({
                series: {
                  id: 'pie',
                  label: {
                    formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                  },
                  encode: {
                    value: dimension,
                    tooltip: dimension
                  }
                }
              });
            }
          });
          myChart.setOption(option);

        });

        option && myChart.setOption(option);

      }
    }
</script>

<style scoped>

</style>
